<template>
    <div class="videoList">
        <div v-for="item in props.videoLists">
            <div class="videoItem" @click="showVideoDetail(item.id)">
                <div class="videoLeft">
                    <div class="videoDuration">
                        {{ formatDuring(item.duration) }}
                    </div>
                    <img :src="item.cover" alt="" class="videoimg">
                </div>
                <div class="videoCotent">
                    <div class="videoName">
                        {{ item.name }}
                    </div>
                    <div class="contentEnd">
                        <div>
                            {{ item.artistName }}
                        </div>
                        <div>
                            {{ changeCount(item.playCount) }}播放
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <van-notify id="van-notify" />
</template>

<script lang='ts' setup>
import store from '@/store';
import { showNotify } from 'vant';
const props = defineProps(['videoLists'])
const changeCount = (num: number) => {
    if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
    } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
    }
    return num
}
const formatDuring = (mss: number) => {
    let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60))
    let seconds = Math.floor((mss % (1000 * 60)) / 1000)
    return minutes + ':' + seconds
}
const showVideoDetail = async (id: number) => {
    store.commit('updateVideoDetailShow')
    let res = await store.dispatch('getVideoUrl', id)
    if (res.data.code === 200 && res.data.data.code === 200) {
        store.commit('updateVideoUrl', res.data.data.url)
    } else {
        showNotify({ type: 'danger', message: '获取视频失败' });
    }
}
</script>
 
<style lang = "less" scoped>
.videoList {
    .videoItem {
        display: flex;
        margin: 0.2rem;


        .videoLeft {
            position: relative;

            .videoDuration {
                position: absolute;
                right: 0.1rem;
                bottom: 0.2rem;
                color: #fff;
                font-size: 0.2rem;
            }

            .videoimg {
                width: 3rem;
                border-radius: 0.2rem;
            }
        }

        .videoCotent {
            margin-left: 0.2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .videoName {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .contentEnd {
                color: #999;
                font-size: 0.15rem;
            }
        }
    }

}
</style>